<template>
  <div style="position: absolute;width: 100%; top:0;z-index: 99">
    <top-header :title="'购物车'" :hasTitle="true" hasBack="" :hasCart="false">
      <div>
        <div
          style="position: absolute ;right: 0.75rem;z-index: 100;background: #169BD5;height:1.6rem;width: 1.6rem;border-radius: 3px;top:0;bottom:0;margin: auto;line-height: 1.6rem"
          @click="sao">
          <i data-v-05b40818="" class="icon njfont nj-saoyisao"
             style="font-size: 1.4rem; color: white; opacity: 0.7;font-weight: 600; vertical-align: middle">
          </i>
        </div>
        <div style="position: absolute;top:0; right:3rem; height:100%;z-index: 100" @click="deleat">
          <div
            style="height:100%;line-height: 3rem;vertical-align:middle;color:#EF5423;padding: 0 0.75rem;font-size: 0.8rem">
            <span>删除</span>
          </div>
        </div>
      </div>
    </top-header>
  </div>

</template>
<script>
  import TopHeader from '@/real-containers/header'
  import {MessageBox} from '@/ui-components'
  import {
    scanDeleteShoppingCart,
    scanAddShoppingCart,
    scanUpdateShoppingCart,
    scanQueryShoppingCart,
    scanQueryShoppingCartForCart
  } from "@/utils/ReturnAxios"
  export default {
    data () {
      return {}
    },
    components: {
      TopHeader
    },
    methods: {
      sao() {
        console.log('ssssssss')
        this.$emit('sao')
      },

      deleat () {
        var checkList = this.checkedCartList
        if (checkList.length == 0) {

          MessageBox({title: ' ', message: "请选择想要移除的商品"}).then(

          )
          return
        }


        MessageBox.confirm('删除商品', {title: "删除商品", message: "是否从购物车中移除该商品", cancelButtonText: '再想想'}).then(
          (res) => {
            this.deleFromCart()
          })


      },
      deleFromCart () {
        var sessionId = localStorage.getItem('sessionId')
        sessionId = sessionId == 'undefined' ? '' : sessionId
        var checkList = this.checkedCartList.filter((item) => {
          return item.goodsType != 8
        })
        var config = {
          shoppingCartList: [],
        }

        if (!checkList || checkList.length == 0) {
          return
        }
        var shoppingCartList = []
        shoppingCartList = checkList.map(
          (item) => {
            return {rid: item.rid}
          }
        )
        config.shoppingCartList = shoppingCartList
        this.ajaxDeleFromCart(config)
      },
      async ajaxDeleFromCart(config)
      {
        var ids = config.shoppingCartList.map((item) => {
          return item.rid
        })
        ids = ids.join(',')

        var res = await scanDeleteShoppingCart(ids)
        res = res.data
        var shoppingCartList = config.shoppingCartList
        this.deleCartVuex(shoppingCartList)
      },

      deleCartVuex(data)
      {
        var cartList = JSON.parse(JSON.stringify(this.cartList))
        data.map((item) => {
            for (var i = 0; cartList.length; i++) {
              if (cartList[i].rid == item.rid) {
                cartList.splice(i, 1)
                break
              }
            }
          }
        )
        this.$store.commit('cjy/SET_OFF_LINE_ACTIVE_DATA', cartList)
      },

      delChose () {
        this.$emit('delChose')
      }
    },
    computed: {
      checkedCartList() {
        console.log(this.$store.getters['cjy/offLineSelectData'], '0000000000000000000')
        return this.$store.getters['cjy/offLineSelectData']
      },
      cartList () {
        return this.$store.getters['cjy/offLineAcitveData']

      }
    },
  }
</script>

<style>

</style>
